<template>
	<ul class="w-100">
		<li v-for="(v, k) in groupObj" :key="k">
			<p class="line-title">{{ k }}</p>
			<el-radio-group v-model="selected" @change="handleSelect">
				<el-radio :label="chi.name" :value="chi.name" v-for="chi in v" :key="chi.name"></el-radio>
			</el-radio-group>
		</li>
	</ul>
</template>

<script setup lang="ts">
import { groupBy } from 'lodash-es'
import { useCommonStore } from '@/stores/common'

const { setTempParams } = useCommonStore()

type Props = {
	data: any
	value?: string | number
	relateProp?: any
}
const props = withDefaults(defineProps<Props>(), {})

const emit = defineEmits(['change'])
const selected: any = ref('')

const groupObj: any = ref({})
let tableData = []
const getInitData = () => {
	const dataList = props.data
		.filter((item) => item.dimension == 3)
		.map((item) => {
			if (props.relateProp && props.relateProp?.includes(item.name)) {
				return {
					...item,
					...(item.reserve || {}),
				}
			}
		})
		.filter(Boolean)

	const dataAllList = props.data
		.filter((item) => item.dimension == 3)
		.map((item) => {
			return {
				...item,
				...(item.reserve || {}),
			}
		})
		.filter(Boolean)
	groupObj.value = groupBy(dataList, 'typeName')
	setTempParams(dataAllList)
	tableData = dataList
}

const handleSelect = () => {
	const itemObj = tableData.filter((item) => item.name == selected.value)[0] || {}
	emit('change', selected.value, itemObj)
}

watch(
	() => props.value,
	() => {
		selected.value = props.value
	},
	{
		immediate: true,
	}
)

onMounted(() => {
	getInitData()
})
</script>

<style scoped></style>
